<template>
	<!-- 弹框 -->
	<view v-show="isShowModal" class="modal" :class="isShowModal ? 'show' : ''">
		<view class="main">
			<!-- 弹框标题 -->
			<view class="modal-title" :style="{color: titleColor}">{{ titleContect }}</view>
			<!-- 中间部分-->
			<view class="middle-context"
				:class="modalStytle === 0 ? 'left-text' : modalStytle === 1 ? 'two-line' : modalStytle === 2 ? 'hasInput' : ''">
				<view class="content" v-if="modalStytle === 1">
					<view>
						<text>工作单价</text>
						<text>{{ workPrice }}{{ jobType ? '元/天' : '元/小时' }}</text>
					</view>
					<view>
						<text>工作时长</text>
						<text>{{ jobType ? '1 天' :parseInt(workTime)+'分钟' }}</text>
					</view>
					<view v-if="jobleve==0" style="color: red;align-self: center;margin-top: 20rpx;"> 注:
						请在雇主结算工资后，再离开现场。 </view>
					<view v-if="jobleve==1" style="color: red;align-self: center;margin-top: 20rpx;"> 注: 未到时间，收工需要雇主同意。
					</view>
				</view>
				<view class="content" v-else-if="modalStytle ===2">
					<view>
						<text>计件单价</text>
						<text>{{ unitPrice }}元/件</text>
					</view>
					<input type="number" placeholder="请填写完成件数" placeholder-class="plaho" @input.stop="handleInput"
						@confirm="" />
					<view v-if="jobleve==0" style="color: red;align-self: center; margin-top: 20rpx;"> 注:
						请仔细核对件数后，再进行结算。 </view>
					<view v-if="jobleve==1" style="color: red;align-self: center; margin-top: 20rpx;"> 注: 未到时间，收工需要雇主同意。
					</view>
				</view>
				<view class="content" v-else-if="modalStytle ===98">
					<span :style="{color: contentColor}">{{middleContext.slice(0,middleContext.indexOf('#'))}}</span>
					<span
						:style="{color: contentsColor}">{{middleContext.slice(middleContext.indexOf('#')+1,middleContext.lastIndexOf('#'))}}</span>
					<span
						:style="{color: contentColor}">{{middleContext.slice(middleContext.lastIndexOf('#')+1)}}</span>
				</view>
				<view class="content" v-else-if="modalStytle ===99">
					<span :style="{color: contentColor}">{{middleContext}}</span>
				</view>
				<view class="content" v-else>
					<span :style="{color: contentColor}">{{middleContext.slice(0, 4)}}</span>
					{{ middleContext.length-6 > 4 ? middleContext.slice(4, (middleContext.length-6)) : middleContext.slice(4)}}
					<span v-if="middleContext.length-6 > 4"
						:style="{color: contentColor}">{{middleContext.slice((middleContext.length-6))}}</span>
				</view>
			</view>
			<!-- 确认按钮 -->
			<view class="myButtonStule" v-if="modalStytle ===98">
				<view @click="handleLeft">{{ leftContext }}</view>
				<view @click="handleRight">{{ rightContext }}</view>
			</view>
			<view class="myButtonStule" v-else-if="modalStytle ===99">
				<view @click="handleLeft">{{ leftContext }}</view>
				<view @click="handleRight">{{ rightContext }}</view>
			</view>
			<view class="confirmButton" v-else>
				<view @click="handleLeft">{{ leftContext }}</view>
				<view @click="handleRight">{{ rightContext }}</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			//弹框样式
			modalStytle: {
				type: Number,
				default: 3, //0-left-text,1-two-line,2-hasInput, 3-middle-context
			},
			//计时工作0，计天工作2
			jobType: {
				type: Number,
				default: 0
			},
			//单价
			unitPrice: {
				type: Number,
				default: 0
			},
			//工作时间
			workTime: {
				type: String,
				default: '0'
			},
			//工作单价
			workPrice: {
				type: Number,
				default: 0
			},
			//结算时间
			jobleve: {
				type: Number,
				default: 0
			},
			//是否出现
			isShowModal: {
				type: Boolean,
				default: false
			},
			//弹框标题
			titleContect: {
				type: String,
				default: '确认订单'
			},
			//弹框内容
			middleContext: {
				type: String,
				default: ''
			},
			//弹框按钮
			leftContext: {
				type: String,
				default: '取消'
			},
			//弹框按钮
			rightContext: {
				type: String,
				default: '确认'
			},
			// 标题颜色
			titleColor: {
				type: String,
				default: '#402110'
			},
			// 内容后六位颜色
			contentColor: {
				type: String,
				default: ''
			},
			// 重点内容颜色
			contentsColor: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				// myNum: '',//我填入的计件数量
			}
		},
		methods: {
			// 点击左边事件
			handleLeft() {
				this.$emit('handleLeft')
			},
			// 点击右边事件
			handleRight() {
				this.$emit('handleRight')
			},
			// 输入件数
			//自定义事件
			handleInput(e) {
				// alert(e.target.value)
				//触发自定义事件input，向父组件传递事件input，传递参数e.target.value，
				this.$emit('input', e.target.value)
			},
		},
	}
</script>
<style scoped lang="less">
	.modal {
		z-index: 999;
		position: fixed;
		height: 100vh;
		width: 100vw;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.4);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;

		&.show {
			opacity: 1;
			transition-duration: 0.3s;
			-ms-transform: scale(1);
			transform: scale(1);
			overflow-x: hidden;
			overflow-y: auto;
			pointer-events: auto;
		}

		&>.main {
			background-color: #FFFFFF;
			position: fixed;
			left: 50%;
			top: 35%;
			transform: translateX(-50%);
			width: 540rpx;
			border-radius: 12rpx;

			&>.modal-title {
				// border: 1px solid #000000;
				margin-top: 38rpx;
				font-size: 17px;
				font-weight: bold;
			}

			&>.middle-context {
				margin: 24rpx 0 58rpx;

				&>.content {
					padding: 0 30rpx;
				}
			}

			&>.left-text {
				text-align: left;
			}

			&>.two-line {
				margin: 34rpx 0 48rpx;

				&>.content {
					display: flex;
					flex-direction: column;

					&>view {
						display: flex;

						// letter-spacing: -0.08px;
						&>text {
							height: 38rpx;
							flex: 1;
						}

						&>text:first-child {
							text-align: right;
							margin-right: 30rpx;
							margin-bottom: 20rpx;
							color: rgba(64, 33, 16, 0.50);
						}

						&>text:last-child {
							text-align: left;
							font-weight: bold;
						}
					}
				}
			}

			&>.hasInput {
				display: flex;
				margin: 34rpx 0 38rpx;

				&>.content {
					display: flex;
					flex-direction: column;

					// letter-spacing: -0.08px;
					&>view {
						display: flex;
						margin-bottom: 32rpx;

						&>text {
							line-height: 48rpx;
							flex: 1;
						}

						text:first-child {
							text-align: right;
							margin-right: 15rpx;
							color: rgba(64, 33, 16, 0.50);
						}

						text:last-child {
							margin-left: 15rpx;
							text-align: left;
							font-weight: bold;
						}
					}

					&>input {
						width: 456rpx;
						line-height: 36rpx;
						padding: 7rpx 10rpx;
						background: #F2F2F2;
						border: 1rpx solid rgba(60, 60, 67, 0.29);
						border-radius: 5px;
						caret-color: #F39B19;
						font-size: 13px;
						color: #402110;
						// letter-spacing: -0.08px;
						text-align: justify;
						line-height: 16px;

						@keyframes twinkling {
							0% {
								opacity: 0.1;
							}

							50% {
								opacity: 0.8;
							}

							100% {
								opacity: 0.1;
							}
						}
					}

					.plaho {
						line-height: 36rpx;
						font-size: 13px;
						color: rgba(64, 33, 16, 0.50);
						// letter-spacing: -0.08px;
						height: 36rpx;
					}
				}
			}

			&>.confirmButton {
				width: 100%;
				display: flex;
				border-top: 1px solid rgba(60, 60, 67, 0.29);
				color: rgba(64, 33, 16, 0.70);

				&>view {
					flex: 1;
					height: 87rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 17px;

					&::before {
						content: "";
						position: absolute;
						left: 269rpx;
						bottom: 0;
						width: 2rpx;
						height: 87rpx;
						background: #F2F2F2;
						border-radius: 1px;
					}
				}

				&>view:last-child {
					color: #4E9800;
				}
			}
		}
	}

	.myButtonStule {
		width: 100%;
		display: flex;
		border-top: 1px solid rgba(60, 60, 67, 0.29);
		color: #787878;

		&>view {
			flex: 1;
			height: 87rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 17px;

			&::before {
				content: "";
				position: absolute;
				left: 269rpx;
				bottom: 0;
				width: 2rpx;
				height: 87rpx;
				background: #F2F2F2;
				border-radius: 1px;
			}
		}

		&>view:last-child {
			color: #000000;
			font-weight: 500;
		}
	}
</style>